<script setup>
import { ref, onMounted } from 'vue';
import { useMapStore } from '@/stores/mapStore'

const store = useMapStore()

const listData = ref([]);

// 加载本地GeoJSON文件
const loadLocalGeoJson = async () => {
  try {
    const response = await fetch('/GeoJSON/gd_point.geojson', {
    });
    const geoJsonData = await response.json();

    // 转换GeoJSON为表格需要的格式
    listData.value = geoJsonData.features.map(feature => ({
      id: feature.properties.id,
      name: feature.properties.name,
      state: feature.properties.state,
      operation: '查看',
      // 保留原始feature数据以便后续使用
      rawfeature: feature
    }));
  } catch (error) {
    console.error('加载GeoJSON文件时出错:', error);
  }
};

const handleClick = (feature) => {
  const coordinates = feature.geometry.coordinates;
  store.flyTo({
    longitude: coordinates[0],
    latitude: coordinates[1],
    //高度设为100m
    height: 100
    // height: feature.properties.height // 高度信息
  });
}

onMounted(() => {
  loadLocalGeoJson();
});
</script>

<template>
  <el-row class="table-header">
    <el-col :span="6">序号</el-col>
    <el-col :span="6">名称</el-col>
    <el-col :span="6">状态</el-col>
    <el-col :span="6">操作</el-col>
  </el-row>

  <div class="scroll-container">
    <el-row v-for="item in listData" :key="item.id" class="table-row">
      <el-col :span="6">{{ item.id }}</el-col>
      <el-col :span="6">{{ item.name }}</el-col>
      <el-col :span="6">{{ item.state }}</el-col>
      <el-col :span="6"><el-button @click="handleClick(item.rawfeature)" class="el-button">{{ item.operation
          }}</el-button></el-col>
    </el-row>
  </div>
</template>

<style lang='less' scoped>
.table-header {
  width: 100%;
  color: #4ADE80;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #4ADE80;
  position: sticky;
  /* 固定表头 */
  top: 0;
  background: #000;
  z-index: 10;
}

.scroll-container {
  height: 160px; // 设置一个合适的高度
  overflow-y: auto; // 仅垂直滚动
  margin-top: 10px; // 确保内容不与表头重叠
  width: 100%;
  scrollbar-color: #4ADE80 #000;
  /* 滑块颜色 | 轨道颜色 */
  scrollbar-width: thin;
  /* 可选值：auto|thin|none */
}

.table-row {
  width: 100%;
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-col {
  flex: 1;
  text-align: center;


  &:last-child {
    border-right: none;
  }
}

.el-button {
  background-color: #000;
  color: #4ADE80;
  border: 1px solid #4ADE80;
  border-radius: 2px;
  padding: 5px 10px;
  margin: 2px auto;
}

.el-button:hover {
  background-color: #4ADE80;
  color: #000;
  border: 1px solid #4ADE80;
}
</style>
